<template>
  <el-main class="main">
    <!--带背景色导航栏-->
<!--    <HorizontalMenu></HorizontalMenu>-->
    <!--路由占位符  -->
    <router-view></router-view>
    <el-row :gutter="10">
      <el-col :span="7" align="top" class="left-side">
        <el-row class="left-side-2">
<!--          <HelloWorld/>-->
          <ChinaDetail></ChinaDetail>
        </el-row>
      </el-col>
      <el-col :span="17" class="middle">
<!--        <dv-border-box-1 style="margin-top:0.625rem; left: 2rem; height:38rem; width: 56rem">-->
          <el-row class="middle-main">
<!--              <JobLifes></JobLifes>-->
            <EchartMap></EchartMap>
          </el-row>
<!--        </dv-border-box-1>-->
<!--        <dv-border-box-8 style="margin-top:0.625rem; height:12rem">-->
<!--          <el-row type="flex" justify="center" class="middle-bottom" >-->
<!--            <ChinaMap></ChinaMap>-->
<!--          </el-row>-->
<!--        </dv-border-box-8>-->
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18" class="middle">
        <label>友情链接：</label>
        <a href="https://2019ncov.chinacdc.cn/2019-nCoV/">中国疫情分布图</a>
        <a href="https://coronavirus.jhu.edu/map.html">约翰斯·霍普金斯大学新冠病毒监测</a>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import HelloWorld from './HelloWorld'
import ChinaDetail from "./views/China/ChinaDetail";
import JobLifes from "./views/JobLifes";
import EchartMap from "./views/EchartMap";
import HorizontalMenu from "./HorizontalMenu";
export default {
  name: 'Index',
  components: {
    HelloWorld, JobLifes,  EchartMap, ChinaDetail, HorizontalMenu
  },
  data () {
    return {
    }
  },
  mounted () {
//当手机旋转的时候，触发“orientationchange”该事件
//     window.addEventListener("orientationchange", hengshuping, false);
//     function hengshuping() {
//       alert(545)
//       //横屏
//       if (window.orientation == 90 || window.orientation == -90) {
//         var fromShu=window.localStorage.getItem('name')
//         if(fromShu=='a'){
//           window.location.reload(true);
//           window.localStorage.setItem('name','b');
//         }
//         return false;
//       }
//       //竖屏
//       else if (window.orientation == 0 || window.orientation == 180) {
//         var fromHeng = window.localStorage.getItem('name');
//         if(fromHeng === 'b'){
//           window.location.reload(true);
//         }
//         window.localStorage.setItem('name','a');
//         return false;
//       }
//     }
  },
  methods: {
  }
}
</script>

<style>
  /*@import 'src/assets/scss/home';*/
  /*.middle-main {*/
  /*  width: 45rem;*/
  /*  height: 42rem;*/
  /*  left: 3rem;*/
  /*}*/
  .top {
    height: 0.1rem;
  }
</style>
